<!DOCTYPE html>
<html>
	<head>
		<style>
			body, html {
				margin: 0;
			}
			.stage {
				margin: 0 auto;
				width: 950px;
				height: 100%;
			}
			.demo {
				float: left;
				margin: 5px;
				width: 300px;
				height: 200px;
				background-color: white;
				background-size: 10px 10px;
				border: 1px #000 solid;
				/*background-repeat: no-repeat;*/
			}
			.s1 {
				background-image: -webkit-linear-gradient(top, rgba(200, 0, 0, .5) 25%  ,rgba(200, 0, 0, 0) 25%  ,rgba(200, 0, 0, 0) 75% ,rgba(200, 0, 0, .5) 75% ,rgba(200, 0, 0, .5) 100%), -webkit-linear-gradient(left, rgba(200, 0, 0, .5) 25%  ,rgba(200, 0, 0, 0) 25%  ,rgba(200, 0, 0, 0) 75% ,rgba(200, 0, 0, .5) 75% ,rgba(200, 0, 0, .5) 100%);
			}
			.s2 {
				background-image: -webkit-linear-gradient(left top, rgba(200, 0, 0, 0) 50%  ,rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5) 100%);
			}
			.s3 {
				background-image: -webkit-linear-gradient(left top, rgba(200, 0, 0, 0) 50%  ,rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5) 100%), -webkit-linear-gradient(left bottom, rgba(200, 0, 0, 0) 50%  ,rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5) 100%)
			}
			.s4 {
				background-image: -webkit-linear-gradient(left top, rgba(200, 0, 0, 0) 75%  ,rgba(99, 99, 99, .5) 75%, rgba(99, 99, 99, .5) 100%), -webkit-linear-gradient(right top, rgba(200, 0, 0, 0) 75% ,rgba(0, 0, 0, .5) 75%, rgba(0, 0, 0, .5) 100%), -webkit-linear-gradient(right bottom, rgba(200, 0, 0, 0) 75% ,rgba(99, 99, 99, .5) 75%, rgba(99, 99, 99, .5) 100%), -webkit-linear-gradient(left bottom, rgba(200, 0, 0, 0) 75% ,rgba(0, 0, 0, .5) 75%, rgba(0, 0, 0, .5) 100%);
			}
			.s5 {
				background-image: -webkit-radial-gradient(black 70%, white 100%, white);
			}
			.s6 {
				background-image: -webkit-radial-gradient(50% 50% , circle , #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54, 78, 39, 0) 12%, rgba(54, 78, 39, 0));
			}
		</style>
	</head>
	<body>
		<div class="stage">
			<div class="demo s1">

			</div>
			<div class="demo s2">

			</div>
			<div class="demo s3">

			</div>
			<div class="demo s4">

			</div>
			<div class="demo s5">

			</div>
			<div class="demo s6">

			</div>
            <div id="demo" class="demot s7"></div>
		</div>
	    <script src="js/jquery-1.10.2.js"></script>
	    <script>
			console.log(document.getElementById('demo').classList.contains('s7'));
            $('.demo').css('z-index',"11")
			$('.demo').addClass('test').addClass('test').addClass('test');
	    </script>
	</body>
</html>